"use client"

import * as React from "react"
import {
  ChevronRight,
  ChevronDown,
  File,
  Folder,
  FolderOpen,
  FileText,
  ImageIcon,
  Code,
  Settings,
  Package,
  GitBranch,
} from "lucide-react"

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import type { FileNode } from "@/types/file-tree"

interface FileTreeItemProps {
  node: FileNode
  level: number
  onFileSelect?: (file: FileNode) => void
}

function getFileIcon(fileName: string, isOpen?: boolean) {
  const extension = fileName.split(".").pop()?.toLowerCase()

  if (isOpen !== undefined) {
    return isOpen ? <FolderOpen className="h-4 w-4 text-blue-500" /> : <Folder className="h-4 w-4 text-blue-500" />
  }

  switch (extension) {
    case "tsx":
    case "ts":
    case "js":
    case "jsx":
      return <Code className="h-4 w-4 text-blue-400" />
    case "json":
      return <Settings className="h-4 w-4 text-yellow-500" />
    case "md":
      return <FileText className="h-4 w-4 text-gray-500" />
    case "png":
    case "jpg":
    case "jpeg":
    case "svg":
    case "gif":
      return <ImageIcon className="h-4 w-4 text-green-500" />
    case "css":
      return <Code className="h-4 w-4 text-pink-500" />
    case "html":
      return <Code className="h-4 w-4 text-orange-500" />
    case "gitignore":
      return <GitBranch className="h-4 w-4 text-orange-600" />
    default:
      if (fileName === "package.json") {
        return <Package className="h-4 w-4 text-red-500" />
      }
      return <File className="h-4 w-4 text-gray-400" />
  }
}

function FileTreeItem({ node, level, onFileSelect }: FileTreeItemProps) {
  const [isOpen, setIsOpen] = React.useState(level < 2) // 默认展开前两层

  const handleClick = () => {
    if (node.type === "folder") {
      setIsOpen(!isOpen)
    } else {
      onFileSelect?.(node)
    }
  }

  if (node.type === "file") {
    return (
      <Button
        variant="ghost"
        className={cn(
          "w-full justify-start h-6 px-1 py-0 font-normal text-sm hover:bg-accent/50",
          "text-foreground/80 hover:text-foreground",
        )}
        style={{ paddingLeft: `${level * 12 + 4}px` }}
        onClick={handleClick}
      >
        {getFileIcon(node.name)}
        <span className="ml-1 truncate">{node.name}</span>
      </Button>
    )
  }

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <CollapsibleTrigger asChild>
        <Button
          variant="ghost"
          className={cn(
            "w-full justify-start h-6 px-1 py-0 font-normal text-sm hover:bg-accent/50",
            "text-foreground/80 hover:text-foreground",
          )}
          style={{ paddingLeft: `${level * 12 + 4}px` }}
          onClick={handleClick}
        >
          {isOpen ? <ChevronDown className="h-3 w-3 mr-1" /> : <ChevronRight className="h-3 w-3 mr-1" />}
          {getFileIcon(node.name, isOpen)}
          <span className="ml-1 truncate font-medium">{node.name}</span>
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="space-y-0">
        {node.children?.map((child, index) => (
          <FileTreeItem key={`${child.name}-${index}`} node={child} level={level + 1} onFileSelect={onFileSelect} />
        ))}
      </CollapsibleContent>
    </Collapsible>
  )
}

export function FileTree({ data, onFileSelect }: { data: FileNode[]; onFileSelect?: (file: FileNode) => void }) {
  console.log(data);
  return (
    <div className="w-full space-y-0">
      {data.map((node, index) => (
        <FileTreeItem key={`${node.name}-${index}`} node={node} level={0} onFileSelect={onFileSelect} />
      ))}
    </div>
  )
}
